import React, { useEffect, useRef, useState } from 'react';
import Folder from '@c/Folder';
import AnimatedList from '@c/AnimatedList';
import { observer } from 'mobx-react';
import useStores from '@s';
import SvgIcon from '@c/SvgIcon';

import { useGSAP } from '@gsap/react';
import ScrollTrigger from 'gsap/ScrollTrigger';
import gsap from 'gsap';
import LinkItem from './linkItem';

gsap.registerPlugin(useGSAP, ScrollTrigger);

import { getHomeNavigation } from '../../../api/home';
function Index() {
  const { globalStore, search } = useStores();
  const { them } = globalStore;
  const [navigation, setNavigation] = useState([]);
  const main = useRef();

  useGSAP(
    () => {
      const tl1 = gsap.timeline({
        scrollTrigger: {
          trigger: '.navigation-container',
          start: 'top top+=300px',
          end: '+=800px',
          scrub: true,
          // anticipatePin: 1,
          pin: true,
          // markers: true,
          onUpdate: self => {
            const progress = self.progress;

            if (progress < 0.44) return;

            const dom = document.querySelector('.navigation-list .scroll-list');

            if (!dom) return;

            const scrollHeight = dom.scrollHeight;
            const maxHeight = scrollHeight - dom.offsetHeight;
            const totalY = maxHeight / (1 - 0.44);
            const offsetY = Math.floor(maxHeight - totalY * (1 - progress));
            dom.scrollTo({
              top: offsetY,
              behavior: 'smooth',
            });
          },
        },
      });

      tl1.to(
        '.folder',
        {
          y: '-8px',
          duration: 0.8,
        },
        '<',
      );

      tl1.to(
        '.paper',
        {
          transform: 'translate(-50%, 0%)',
          duration: 0.8,
        },
        '<',
      );

      tl1.to(
        '.folder__front',
        {
          skewX: '15',
          scaleY: '0.6',
          duration: 0.8,
        },
        '<',
      );

      tl1.to(
        '.right',
        {
          skewX: '-15',
          scaleY: '0.6',
          duration: 0.8,
        },
        '<',
      );

      // 纸张打开
      tl1.to(
        '.paper:nth-child(1)',
        {
          x: '-70%',
          y: '-70%',
          rotation: -15,
        },
        '>+=0.8',
      );

      // 第二张纸片
      tl1.to(
        '.folder .paper:nth-child(2)',
        {
          x: '60%',
          y: '-70%',
          rotation: 15,
          height: () => {
            // 动态计算目标高度（例如父元素高度的 80%）
            const parentHeight = document.querySelector('.folder').offsetHeight;
            return parentHeight * 0.8 + 'px';
          },
        },
        '<+=0.2',
      );

      // 第三张纸片
      tl1.to(
        '.folder .paper:nth-child(3)',
        {
          x: '0%',
          y: '-100%',
          rotation: 5,
          duration: 0.3,
          height: () => {
            // 动态计算目标高度（例如父元素高度的 80%）
            const parentHeight = document.querySelector('.folder').offsetHeight;
            return parentHeight * 0.8 + 'px';
          },
        },
        '<+=0.3',
      );

      tl1.to({}, { duration: 3.5 }, '<+=0.5');

      gsap.timeline().add(tl1);
    },
    { scope: main },
  );

  useEffect(() => {
    getList();
  }, []);

  const getList = async (pageIndex = 1, pageSize = 99) => {
    const data = await getHomeNavigation({ pageIndex, pageSize });
    setNavigation(data.data.rows);
  };

  const dockerDom = (
    <div className="w-full h-full flex justify-center items-center">
      <img src="/images/docker.png" width={36} alt="" />
    </div>
  );

  const haDom = (
    <div className="w-full h-full flex justify-center items-center">
      <img src="/images/ha.png" width={36} alt="" />
    </div>
  );

  const jenkinsDom = (
    <div className="w-full h-full flex justify-center items-center">
      <SvgIcon name="jenkins" className="w-9"></SvgIcon>
    </div>
  );

  return (
    <div className="bg-new-bg-sec dark:bg-new-bg-sec-dark py-9 relative" ref={main}>
      <div className=" absolute left-0 right-0 z-[8] bottom-0 top-[95%] bg-gradient-to-t from-new-bg to-transparent dark:from-new-bg-dark"></div>
      <div className="navigation-container">
        <h1 className="text-3xl font-bold text-center">navigation</h1>
        <div className="flex items-center ">
          <div className="h-[500px] relative flex-1 flex justify-center items-center pl-[18%]">
            <Folder size={1.6} color="#00d8ff" className=" mr-12" items={[jenkinsDom, haDom, dockerDom]}></Folder>
          </div>
          <div className="flex-1 pr-[18%]">
            <AnimatedList
              className="navigation-list"
              items={navigation.map((item, index) => (
                <LinkItem key={index} item={item}></LinkItem>
              ))}
              showGradients={true}
              gradientColor={them === 'dark' ? '#242629' : '#eff0f3'}
              enableArrowNavigation={true}
              displayScrollbar={false}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default observer(Index);
